iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
自我挑戰組

網頁學習雜記系列 第 15

Day 15 | inline 與 block 的愛恨情仇

  • 分享至 

  • xImage
  •  

之前被朋友敲碗,
叫我寫一篇解釋 inlineblock
今天就來講一下他們好了,
雖然我前面的 CSS 筆記有稍微講過了,
但就想說拉一些想要獨立講的內容出來寫,
同時也會搭配一些例子,這樣可能比較好理解。

先來講一下常見的 block 有哪些:

  • h1 - h6
  • p
  • section
  • article
  • header
  • footer
  • form

常見的 inline:

  • a
  • span
  • input
  • label
  • button
  • img

當然還有其他的標籤,我就不一一說了。

那就開始來展示一下差別吧~

block
codepen

從這個範例可以看出來,block 物件可以設定寬高,而且不管他寬高多少,後面的內容都會自動排到他的底下。

inline
codepen

從範例可以看出來,設定寬高對 inline 物件是沒有效果的,
在有設定 padding 的情況下,inline 只有左右會排除彼此的距離,上下是不會被空開的。
margin 的設定左右有效,上下是無效的。

inline-block
codepen

跟上一個一樣的設定,唯一的差別就是多了一行 display: inline-block,可以看出來,設定寬高是有意義的,margin 也是都有效的。
不會像 block 一樣直接佔掉一整行,只要空間足夠,物件是會並排的。
inline-block 是個集合了 inlineblock 特性的孩子。

今天就講到這裡啦~
我們明天見。


上一篇
Day 14 | 我的 CSS 筆記 - Part 2
下一篇
Day 16 | 欸!不要這麼浮動好不好
系列文
網頁學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言